<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)

const data = [
  {
    "name": "通用设备制造业",
    "value": 3
  },
  {
    "name": "专用设备制造业",
    "value": 4
  },
  {
    "name": "电气机械和器材制造业",
    "value": 39
  },
  {
    "name": "计算机，通信和其他电子设备制造业",
    "value":48
  },
  {
    "name": "仪器仪表制造业",
    "value": 6
  }
]



onMounted(() => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        type: "scroll",
        orient: 'vertical',
        right: '20px',
        align: 'left',
        top: 'middle',
        data: data.map(item=>{
          return item.name
        }),
        textStyle: {
          color: '#8C8C8C'
        },
        formatter:function (params){
          return params.slice(0, 10) + '...';
        }
      },
      series: [
        {
          type: 'pie',
          center: ['25%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          itemStyle: {
            normal: {
              label: {
                position:"inner",
                show: true,
                formatter: '{d}%',
                textStyle: {
                  color: '#fff',
                  fontSize: 16
                },
              },
              labelLine: {show: true}
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };
    Echarts.setOption(option);

    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
